<template>
  <router-view />
</template>

<script lang='ts'>
import { ref, provide } from "vue";
import { router } from "./router";
export default {
  name: "App",
  setup() {
    // ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI
    const width = document.documentElement.clientWidth;
    const menuVisible = ref(width <= 500 ? false : true);
    provide("menuVisible", menuVisible); // set
    router.afterEach(() => {
      if (document.documentElement.clientWidth <= 500) {
        menuVisible.value = false;
      }
    });
  },
};
</script>
